
<template>
    <div :style="{marginTop:$store.state.navbarHeight+6+'px'}">
        <Navbar bgColor="bg-gradual-7" title="تۈرلەر" />
        <Tabbar :selectNavIndex="2"></Tabbar>
        <div class="wrap" :style="{marginTop:customBar()*2+12+'rpx'}">
            <div class="sort-wrap">
                <div class="item" @click="getMore('VIP')">
                    <image src="https://mars-kino.oss-cn-beijing.aliyuncs.com/static/VIP%20%281%29.png" lazy-load></image>
                    <span class="title">كىنولار VIP</span>
                </div>
                <div class="item" @click="getMore('MONEY')">
                    <image src="https://mars-kino.oss-cn-beijing.aliyuncs.com/static/shortvideo.png" lazy-load></image>
                    <span class="title">ھەقلىق كىنو</span>
                </div>
                <div class="item" @click="getMore('MOVIE')">
                    <image src="https://mars-kino.oss-cn-beijing.aliyuncs.com/static/video.png" lazy-load></image>
                    <span class="title">كىنو</span>
                </div>
                <div class="item" @click="getMore('TV')">
                    <image src="https://mars-kino.oss-cn-beijing.aliyuncs.com/static/tv.png" lazy-load></image>
                    <span class="title">قىسىملىق</span>
                </div>
                <div class="item" @click="getMore('FUN')">
                    <image src="https://mars-kino.oss-cn-beijing.aliyuncs.com/static/gaoxiao2.png" lazy-load></image>
                    <span class="title">كۈلدۈرگە</span>
                </div>
                <div class="item" @click="getMore('NETTV')">
                    <image src="https://mars-kino.oss-cn-beijing.aliyuncs.com/static/netTv.png" lazy-load></image>
                    <span class="title">تور فىلىملىرى</span>
                </div>
                <div class="item" @click="getMore('VARIETY')">
                    <image src="https://mars-kino.oss-cn-beijing.aliyuncs.com/static/zongyi.png" lazy-load></image>
                    <span class="title">سەنئەت</span>
                </div>
                <div class="item" @click="getMore('CARTOON')">
                    <image src="https://mars-kino.oss-cn-beijing.aliyuncs.com/static/cartoon.png" lazy-load></image>
                    <span class="title">كارتون</span>
                </div>
                <div class="item" @click="getMore('LOCAL')">
                    <image src="https://mars-kino.oss-cn-beijing.aliyuncs.com/static/other.png" lazy-load></image>
                    <span class="title">ئۆزتىل</span>
                </div>
            </div>
        </div>
        <!-- Clicked: {{ $store.state.counter.count }} times, count is {{ evenOrOdd }}.
        <button @click="increment()|test()">+</button>
        <button @click="decrement">-</button>
        <button @click="incrementIfOdd">Increment if odd</button>
        <button @click="incrementAsync">Increment async</button>
        globalData:{{ globalData }} -->
    </div>
</template>

<script>
import Tabbar from "@/components/Tabbar.vue";
import Navbar from "@/components/Navbar.vue";

import { mapState, mapActions, mapGetters } from "vuex";

export default {
    components: {
        Tabbar,
        Navbar
    },
    data() {
        return {};
    },
    methods: {
        ...mapActions([
            "increment",
            "decrement",
            "incrementIfOdd",
            "incrementAsync"
        ]),
        ...mapGetters(["evenOrOdd", "clientRect", "customBar"]),
        getMore(sort) {
            if (sort == "VIP") {
                wx.navigateTo({
                    url: "/pages/VideoList/VideoList?from=VIP"
                });
            } else
                wx.navigateTo({
                    url: "/pages/VideoList/VideoList?from=sort&sort=" + sort
                });
        }
    },
    created() {
        var appInstance = getApp();
        this.globalData = appInstance.globalData;
    },
    onShareAppMessage() {
        return {
            title: "مارس كىنوخانىسى",
            path: `/pages/Home/Home`,
            success: res => {
                console.log("share-success");
            },
            fail: () => {
                console.log("share-fail");
            },
            complete: () => {}
        };
    },
    onShow() {
        wx.hideTabBar();
        let userInfo = wx.getStorageSync("userInfo");
        if (userInfo && userInfo.openId && userInfo.uid) {
            this.$store.commit("SET_USERINFO", userInfo);
        } else {
            if (this.$store.state.config.forceLogin) {
                wx.navigateTo({ url: "/pages/Login/Login" });
            } else {
            }
        }
    }
};
</script>
<style lang="scss" scoped>
.wrap {
    border: 1px solid transparent;
    .sort-wrap {
        margin: 0 auot;
        margin-top: 20rpx;
        width: 98%;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        .item {
            width: 30%;
            height: 250rpx;
            box-shadow: 0 0 15rpx 5rpx rgba(0, 0, 0, 0.15);
            border-radius: 40rpx;
            margin: 10rpx 0;
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-direction: column;
            /* &:last-of-type {
                margin-right: 33.9%;
            } */
            &:nth-of-type(3),
            &:nth-of-type(5) {
                image {
                    width: 100rpx;
                    height: 100rpx;
                }
            }
            image {
                width: 120rpx;
                height: 121rpx;
                margin-bottom: -68rpx;
            }
            .title {
                color: #666;
                font-size: 17px;
                transform: scaleY(0.8);
            }
        }
    }
}
</style>
